<template>
   <Layout>
     <template v-slot:middle  >
        <BlogList ref="middleRefDom"  :row="blogListRef.row" @clickType ="seclectType"  ></BlogList>
        <PageButton :count="blogListRef.count" @change="changepage" :current="skipRef" ></PageButton>
     </template>

      <template v-slot:right >
          <RightList @selectType="seclectType"  :list="type" ></RightList>
      </template>

   </Layout>
  
</template>

<script>
import Layout from "../../components/Layout/layout.vue";
import RightList from './rightList.vue';
import {getType,type} from "../../compostion/useBlog.js";
import {useRoute,useRouter}from "vue-router";
import {getBlogList } from '../../api/getHomeInfo.js';
import BlogList from "./bloglist.vue"
import { watch,ref,onUpdated } from "vue";
import PageButton from '../../components/pageButton'
export default {
  components:{
    Layout,
    RightList,
    BlogList,
    PageButton
  },
  setup(p,cxt){
    getType();
    const route = useRoute();
    const router = useRouter();
    const blogListRef = ref({
      count : null,
      row:null
    });
    const skipRef = ref(1);
    const middleRefDom = ref(null)
    
    watch(()=>[route.params,route.query],async(result)=>{
    

        if(result[1].skip) skipRef.value = result[1].skip;
        else skipRef.value = 1;
        await getBlogListInfo(result[0].type,skipRef.value);
      
    },{
       immediate: true
    });


   onUpdated(()=>{
     middleRefDom.value.$el.parentElement.scrollTop = 0;
   })




   const seclectType = (type)=>{
      router.push({
        name:"articleType",
        params:{
          type
        }
      })
     
    }
    const changepage =(skip) =>{
      router.push({
        name :"articleType",
        query:{
          skip
        }
      })
    }

   async function getBlogListInfo(type,skip = 1){
        const blogList =   await getBlogList(type,skip);
        blogListRef.value.count = blogList.count;
        blogListRef.value.row = blogList.result;
   }


    return {
        type,
        seclectType,
        blogListRef,
        changepage,
        skipRef,
        middleRefDom,
        
    }

  }

}
</script>

<style lang="less" scoped>
 
</style>